﻿<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page session="true"%>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=1600, initial-scale=1.0">
<link rel="stylesheet" href="icofont/css/all.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/user.css">
<link rel="shortcut icon" href="images/favicon.ico">
<title>统计结果</title>
</head>

<body>
	<div class="nav">
		<a href="#"><img src="images/logo.png" width="130" height="48"></a>
		<ul>
			<li><a href="/query/manager"><span class="fas font">&#xf21b;</span>管理员入口</a></li>
			<li><a href="/query/user/search"><span class="fas font">&#xf7f2;</span>我的问卷</a></li>
			<li>
				<div class="usr">
					<span class="fas font">&#xf508;</span>${user.userName}
					<div class="choice">
						<span class="fas font"><a href="/query/user">&#xf02d;用户信息</a></span>
						<p class="line"></p>
						<span class="fas font"><a href="/query/logout">&#xf14d;退出登录</a></span>
					</div>
				</div>
			</li>
		</ul>
	</div>
	<div>
		<div class="menu">
			<span><a href="/query/user/questions/0">返回</a></span> <span
				class="fas font"><a href="#">&#xf304;&nbsp;&nbsp;统计结果</a></span> <span
				class="fas font"><a
				href="/query/paper/detail/${questionList[0].questionnaireId}">&#xf02d;&nbsp;&nbsp;详细信息</a></span>
		</div>
		<div class="content">
			<div class="title">
				<span class="fas font">&#xf304;&nbsp;&nbsp;统计结果(仅选择题)</span>
			</div>
			<p class="line"></p>
			<div class="query">
				<c:forEach items="${questionList}" var="question" varStatus="loop">
					<c:choose>
						<c:when test="${question.type eq 1 }">
							<div>
								<p name="${question.total}">${question.orderNumber}.单选题:${question.description}</p>
								<p name="${question.answerA}">
									选项A:${question.choiceA}<span>${question.answerA}人选择/总人数:${question.total}</span>
								</p>
								<p name="${question.answerB}">
									选项B:${question.choiceB}<span>${question.answerB}人选择/总人数:${question.total}</span>
								</p>
								<p name="${question.answerC}">
									选项C:${question.choiceC}<span>${question.answerC}人选择/总人数:${question.total}</span>
								</p>
								<p name="${question.answerD}">
									选项D:${question.choiceD}<span>${question.answerD}人选择/总人数:${question.total}</span>
								</p>
								<div class="views"></div>
							</div>
						</c:when>
						<c:when test="${question.type eq 2 }">
							<div>
								<p name="${question.total}">${question.orderNumber}.多选题:${question.description}</p>
								<p name="${question.answerA}">
									选项A:${question.choiceA}<span>${question.answerA}人选择/总人数:${question.total}</span>
								</p>
								<p name="${question.answerB}">
									选项B:${question.choiceB}<span>${question.answerB}人选择/总人数:${question.total}</span>
								</p>
								<p name="${question.answerC}">
									选项C:${question.choiceC}<span>${question.answerC}人选择/总人数:${question.total}</span>
								</p>
								<p name="${question.answerD}">
									选项D:${question.choiceD}<span>${question.answerD}人选择/总人数:${question.total}</span>
								</p>
								<div class="views"></div>
							</div>
						</c:when>
					</c:choose>
				</c:forEach>
				<p class="line"></p>
			</div>
		</div>
	</div>
</body>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/highcharts.js"></script>
<script>
	$(document)
			.ready(
					function() {
						var chart = {
							plotBackgroundColor : null,
							plotBorderWidth : null,
							plotShadow : false
						};
						var title = {
							text : '选择详情'
						};
						var tooltip = {
							pointFormat : '{series.name}: <b>{point.percentage:.1f}%</b>'
						};
						var plotOptions = {
							pie : {
								allowPointSelect : true,
								cursor : 'pointer',
								dataLabels : {
									enabled : true,
									format : '<b>{point.name}%</b>: {point.percentage:.1f} %',
									style : {
										color : (Highcharts.theme && Highcharts.theme.contrastTextColor)
												|| 'black'
									}
								}
							}
						};
						var views = $("div.views");
						var query = $(".query p");
						for (var i = 0; i < views.length; i++) {
							var A = query[i * 5 + 1].getAttribute("name");
							var B = query[i * 5 + 2].getAttribute("name");
							var C = query[i * 5 + 3].getAttribute("name");
							var D = query[i * 5 + 4].getAttribute("name");
							var total = A + B + C + D;
							if (total != 0) {
								A = (A / total) * 100;
								B = (B / total) * 100;
								C = (C / total) * 100;
								D = (D / total) * 100;
								total = total - A - B - C - D;
								var series = [ {
									type : 'pie',
									name : '占所有提交选项之比',
									data : [ [ '选A人数', A ], [ '选B人数', B ],
											[ '选C人数', C ], [ '选D人数', D ] ]
								} ];
								var json = {};
								json.chart = chart;
								json.title = title;
								json.tooltip = tooltip;
								json.series = series;
								json.plotOptions = plotOptions;
								views.eq(i).highcharts(json);
							}
						}
					});
</script>
</html>
